<template>
  <div class="SearchList">
    <div class="list_box">
      <slot name="before"></slot>
      <div class="content">{{searchList.name}}</div>
      <slot name="after"></slot>
    </div>
    <i class="iconfont icon players" @click.stop.prevent="toMv(searchList.mvid)" v-if="searchList.mvid&&searchList.mvid!=0">&#xe60e;</i>
    <i class="iconfont icon" v-if="!searchList.isSearch&&searchList.mvid==0">&#xe624;</i>
  </div>
</template>

<script>
import SearchListTitle from '@/components/SearchListTitle';
export default {
  components: {
    SearchListTitle
  },
  created() {},
  props: {
    searchList: [Object, Array, Boolean]
  },
  methods: {
    toMv(ids) {
      this.$store.commit('rotateing', false);
      this.$router.push({
        path: '/mv',
        query: {
          ids: ids
        }
      });
    }
  }
};
</script>

<style scoped>
.icon {
  content: '';
  width: 23px;
  height: 44px;
  position: absolute;
  right: 0;
  top: 10px;
}
.content {
  height: 50px;
  line-height: 50px;
  border-bottom: 0.5px solid rgb(240, 241, 242);
}
.SearchList {
  width: 100%;
  padding: 0 0 20px 10px;
  position: relative;
}
.list_box {
  padding-left: 27px;
  position: relative;
}
.SearchListTitle {
  color: rgb(100, 135, 176);
  padding: 20px 0;
  padding-left: 10px;
  border-bottom: 2px solid rgb(227, 227, 227);
  box-shadow: gray;
}
</style>